<template>
  <div>
    <van-nav-bar title="进货" />
    <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
      <!-- <van-list v-model="listLoading" :finished="finished" finished-text="没有更多啦" @load="onLoad"> -->
      <div class="stock__item" v-for="item in list">
        <div class="stock__img" v-bind:style="{backgroundImage: 'url(' + item.icon + ')'}"></div>
        <div class="stock__info">
          <div class="stock__info__name">{{item.name}}</div>
          <div class="stock__info__size">押桶价:￥{{item.bucketPrice}}/买桶价:￥{{item.buyPrice}}</div>
          <div class="stock__info__sales">销量:{{item.sales}}</div>
          <div class="stock__info__cart">
            <div class="stock__info__price">￥{{item.price}}</div>
            <div class="stock__info__control">
              <van-stepper v-model="item.count" :min="0" :max="1000" integer />
            </div>
          </div>
        </div>
      </div>
      <!-- </van-list> -->
    </van-pull-refresh>

    <div class="stock__cart">
      <cart :selectProducts="products" @submit="submit"></cart>
    </div>
  </div>
</template>

<script>
  import {
    PRODUCT_LIST,
  } from '@/api/stock';
  import {
    PRODUCT_STOCK_LIST
  } from '@/api/product';
  import {
    mapState
  } from 'vuex';
  import Cart from '@/components/Cart'
  export default {
    components: {
      Cart
    },
    mounted() {
      //读取上次购物车商品
      if (sessionStorage.getItem('cartData') !== null) {
        this.cartData = JSON.parse(sessionStorage.getItem('cartData'))
      };
      this.getList();
    },
    data() {
      return {
        refreshLoading: false,
        listLoading: false,
        finished: false,
        currPage: 1,
        pageSize: 10,
        list: [],
        cartData: []
      }
    },
    computed: {
      ...mapState(['stationInfo']),
      products() {
        let list = [];
        this.list.forEach(el => {
          if (el.count) {
            list.push(el);
          }
        });
        return list;
      }
    },
    methods: {
      getList() {
        this.$reqPost(PRODUCT_STOCK_LIST, new URLSearchParams({
          stationId: this.stationInfo.id,
        })).then(res => {
          this.refreshLoading = false;
          if (res.rows.length == 0) {
            this.$dialog.confirm({
              title: '提示',
              message: '暂无水厂商品，前往提交审核？'
            }).then(() => {
              // on confirm
              this.$router.push('/productApproval')
            }).catch(() => {
              // on cancel
            });
          }
          res.rows.forEach(el => {
            el.count = 0;
            this.cartData.forEach(item => {
              if (item.id == el.id) {
                el.count = item.count;
              }
            });
          });
          this.list.push(...res.rows);
        });
        // this.$reqPost(PRODUCT_LIST, {
        //   stationId: this.stationInfo.id,
        //   page: this.currPage,
        //   rows: this.pageSize,
        // }).then(res => {
        //   this.refreshLoading = false;
        //   this.listLoading = false;
        //   if (this.list.length == res.total) {
        //     this.finished = true;
        //   }
        //   res.rows.forEach(el => {
        //     el.count = 0
        //     this.cartData.forEach(item => {
        //       if(item.id == el.id){
        //         el.count = item.count;
        //       }
        //     });
        //   });
        //   this.list.push(...res.rows);
        // })
      },
      onRefresh() {
        this.list = [];
        this.finished = false;
        this.refreshLoading = true;
        this.getList();
      },
      onLoad() {
        this.listLoading = true;
        this.refreshLoading = true;
        this.currPage++;
        this.getList();
      },
      submit(products) {
        sessionStorage.setItem('cartData', JSON.stringify(products));
        this.$router.push({
          path: '/stockConfirm'
        })
      }
    }
  };

</script>

<style lang="less" scoped>
  @import '../../styles/variable.less';

  .stock__item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    background-color: #ffffff;

    .stock__img {
      width: 80px;
      margin-right: 10px;
      background-image: url('../../assets/product.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    .stock__info {
      flex: 1;

      .stock__info__name {
        color: #333;
      }

      .stock__info__size,
      .stock__info__sales {
        margin: 6px 0;
        font-size: 12px;
        color: #999;
      }

      .stock__info__price {
        color: @col-the;
        font-size: 20px;
      }
    }


    .stock__info__cart {
      display: flex;
      justify-content: space-between;
    }

    &:last-child {
      padding-bottom: 50px;
    }
  }

  .stock__cart {
    position: fixed;
    bottom: 50px;
    width: 100%;
  }

</style>
